import React, { useEffect } from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex } from 'antd';
import useDebounce from '../../hooks/useDebounce';
import useCount from '../../hooks/useCount';
import request from '../../utlis/request';
import { useDispatch } from 'react-redux'
import { setUser } from '../../reducers/userSlice';
const Login = () => {
    const dis = useDispatch()
    // 倒计时
    const [form] = Form.useForm()
    const { run, count, countDown } = useCount(5)

    const yzm = () => {
        countDown()
        setTimeout(() => {
            form.setFieldsValue({
                code: Math.random().toString(32).slice(2, 6)
            })
        }, 3000)
    }

    const onFinish = useDebounce(async (values) => {
        console.log('Received values of form: ', values);
        let res = await request.post('/login', values)
        console.log(res);
        const { code, token } = res.data
        if (code === 1) {
            localStorage.setItem('token', token)
            localStorage.setItem('username', values.username)

            if (values.remember) {
                localStorage.setItem('n', values.username)
                localStorage.setItem('p', values.password)
            } else {
                localStorage.removeItem('n')
                localStorage.removeItem('p')

            }

            let res = await request.get('/getUserInfo', { params: values })
            console.log(res);
            const { code, data } = res.data
            if (code === 1) {
                dis(setUser({ name: data.name, pic: data.pic }))
                window.location.href = '/index/home'
                alert('登录成功')
            }
        }

    }, 1000)
    useEffect(() => {
        form.setFieldsValue({
            username: localStorage.getItem('n'),
            password: localStorage.getItem('p'),
        })
    }, [])
    return (
        <div style={{ width: '100vw', height: '100vh' }}>
            <div style={{ height: 200 }}></div>
            <div style={{ marginLeft: '40%' }}>
                <Form
                    form={form}
                    name="login"
                    initialValues={{ remember: true }}
                    style={{ maxWidth: 360 }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        name="username"
                        rules={[{ required: true, message: '请输入用户名!' }, { pattern: /^(?=.*[a-z]).{4,8}$/, message: '用户名必须4-8位并且全是字母' }]}
                    >
                        <Input prefix={<UserOutlined />} placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '请输入密码!' }, { pattern: /^(?=.*[0-9])(?=.*[a-z])(?=.*[_]).{3,10}$/, message: '密码必须包含数字,字母下划线,3-10位' }]}
                    >
                        <Input.Password prefix={<LockOutlined />} type="password" placeholder="请输入密码" />
                    </Form.Item>
                    <div style={{ display: 'flex' }}>
                        <Form.Item
                            name="code"
                            rules={[{ required: true, message: '请输入验证码!' }, { pattern: /^[A-Za-z0-9]{4}$/, message: '验证码4位数字和字母' }]}
                        >
                            <Input placeholder="请输入验证码" />
                        </Form.Item>
                        <Button
                            disabled={run}
                            onClick={() => { yzm() }}
                        >{run ? count + '秒后获取验证码' : '获取验证码'}</Button>
                    </div>
                    <Form.Item>
                        <Flex justify="space-between" align="center">
                            <Form.Item name="remember" valuePropName="checked" noStyle>
                                <Checkbox>记住密码</Checkbox>
                            </Form.Item>
                        </Flex>
                    </Form.Item>

                    <Form.Item>
                        <Button block type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>

    );
};
export default Login;